<template>
  <div class="waterMeterLeftTree">
    <div class="title">
      <!-- {{areaData}} -->
      <!-- {{waterNo}}888 -->
      <span>选择小区</span>
      <button class="titleButton" @click="clickLeft">
        <i class="el-icon-caret-left"></i>
      </button>
      <!-- <el-button icon="el-icon-caret-left"></el-button> -->
      <!-- <i class="el-icon-caret-left"></i> -->
    </div>
    <div class="search">
      <el-input
        placeholder="请输入关键字"
        v-model="filterText"
        class="searchFont"
        clearable
      >
      </el-input>
      <!-- <i class="el-icon-d-caret"></i> -->
      <!--  <button class="searchButton" @click="changeDefault">
        <i class="el-icon-d-caret"></i>
      </button> -->
      <!-- <i class="el-icon-caret-top"></i> -->
    </div>
    <!-- {{areaData}} -->
    <el-tree
      class="tree filter-tree"
      :data="areaData"
      :props="defaultProps"
      :default-expand-all="defaultTree"
      :filter-node-method="filterNode"
      node-key="id"
      @node-click="handleNodeClick"
      ref="tree"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span> <i :class="data.icon"></i>&nbsp;{{ node.label }} </span>
      </span>
      <!-- icon-class='el-icon-folder' -->
    </el-tree>
  </div>
</template>

<script>
import {
  getTree, //区域树--小区资料全部
} from "@/api/baseManage/flCommunity/index";
import { flWaterMeterInfoSearch } from "@/api/waterAnalysis/flWaterMeterRecord/index";
export default {
  name: "waterMeterLeftTree",
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    forAll(arr, isExpand) {
      arr.forEach((i) => {
        this.$refs.tree.toggleRowExpansion(i, isExpand);
        if (i.children) {
          this.forArr(i.children, isExpand);
        }
      });
    },
    expandAll() {
      this.forAll(this.areaData, true);
    },
    collapseAll() {
      this.forAll(this.areaData, false);
    },
    async handleNodeClick(a, b, c) {
      console.log(a, b, c, 999);
      this.$emit("areaIf", a.code);
      // 动态添加  用户名
      if (!b.childNodes.length) {
        console.log("发送axios请求");
        let aCode = a.code;
        // 动态添加
        if (aCode) {
          let Obj = { communityCode: aCode };
          const res = await flWaterMeterInfoSearch(Obj);
          console.log(res, 99666);

          let areaDataRes = res.data;
          for (let index = 0; index < areaDataRes.length; index++) {
            let element = areaDataRes[index];
            element["icon"] = "el-icon-s-custom";
          }
          // areaDataRes['icon'] = 'el-icon-s-custom'
          this.changeLabels(areaDataRes);
          console.log(res, "kankanjieguo");
          this.$set(a, "children", res.data);
          console.log(this.areaData, 222222222222);
        }
        // 发送参数
        else {
          if (a.userCode) {
            this.$emit("userCodeCan", a.userCode);
            this.$emit("waterNoCan", a.waterNo);
            this.$emit("communityCodeCan", a.communityCode);
            // this.$bus.$emit('flWaterMeterRecordClick',a.userCode,a.waterNo,a.communityCode)
            console.log(a.communityCode, 888);
          }
        }
      }
    },
    // append(areaData) {
    //     const newChild = { id: id++, label: 'testtest', children: [] };
    //     if (!areaData.children) {
    //         this.$set(areaData, 'children', Obj);
    //     }
    //     data.children.push(newChild);
    // },
    // 点击按钮
    clickLeft() {
      this.$emit("clickClose", "点击隐藏");
    },
    // 获取树资料
    async getTreeData() {
      const res = await getTree();
      // console.log(res);
      this.areaData = res.data;
      this.changeLabel(this.areaData);
      console.log(this.areaData, 339);
    },
    // 转为label
    changeLabel(arr) {
      arr.forEach((item) => {
        for (var key in item) {
          if (item.level === "1") {
            item["icon"] = "el-icon-s-home";
          } else if (item.level != "1") {
            item["icon"] = "el-icon-s-promotion";
          }
          // else if(item.level === '2'){
          //     item['icon'] = 'el-icon-s-promotion'
          // }
          // else if(item.level === '3'){
          //     item['icon'] = 'el-icon-s-custom'
          // }
          if (key === "name") {
            item["label"] = item[key];
            delete item[key];
          }
          if (key === "children" && item[key].length) {
            var arr1 = item[key];
            this.changeLabel(arr1);
            // this.getIcon(this.areaData)
          } else {
            if (item.level != "1") item["icon"] = "el-icon-s-custom";
          }
        }
      });
    },
    // 转为label
    // changeLabel(arr){
    //     arr.forEach(item => {
    //         for(var key in item) {
    //             if( key === 'name' ) {
    //                 item['label'] = item[key]
    //                 delete item[key]
    //             }
    //             if ( key === 'children') {
    //                 var arr1 = item[key]
    //                 this.changeLabel(arr1)
    //             }
    //         }
    //     })
    // },
    // 转为label
    changeLabels(arr) {
      arr.forEach((item) => {
        for (var key in item) {
          if (key === "waterNo") {
            // if( key === 'contacts' ) {
            // item['label'] = item[key]
            item["label"] = item["setupAddress"];
            //item['point'] = item[setupAddress]
            // delete item[key]
          }
        }
      });
    },
    // 刷新树
    // buildTree(){
    //     for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
    //         this.$refs.tree._getAllNodes()[i].expanded = this.defaultTree
    //     }
    // },
    //   改变展开
    changeDefault() {
      let defaultTree = this.defaultTree;
      console.log(this.defaultTree);

      this.defaultTree = !defaultTree;
      // 测试。。。。。。。。。。。。。。。。。测试
      this.forAll(this.areaData, defaultTree);
      // this.buildTree()
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
  created() {
    this.getTreeData();
  },

  data() {
    return {
      //   显示开关
      //   小区资料数据
      areaData: [],
      //   展开开关
      defaultTree: false,
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.waterMeterLeftTree {
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 2px;
  .filter-tree {
    font-size: 12px !important;
    overflow: auto;
    height: calc(100vh - 200px);
  }
  // -----------------
  /deep/ .el-tree {
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    /deep/.el-tree-node__content {
      // padding: 0;
    }
  }

  // ---------------------------------
  //有子节点 且未展开
  .el-tree /deep/ .el-icon-caret-right:before {
    background: url("../../../../../static/xinzeng1.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    background-size: 10px;
  }
  //有子节点 且已展开
  .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../../../../static/jian.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    background-size: 10px;
  }
  // 没有子节点
  .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
    background: url("../../../../../static/jian.png") no-repeat 0 0;
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    background-size: 10px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e6e6e6;
    padding: 10px 0 10px 10px;
    // .el-icon-caret-left{
    //     float:right;
    //     margin-right: -10px;
    // }
    .titleButton {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 0;
      padding: 0;
      margin-right: -2px;
      .el-icon-caret-left {
        margin: -10px 0px 0px 0px;
        font-size: 16px;
      }
    }
  }
  .search {
    display: flex;
    justify-content: center;
    align-items: center;
    .searchFont {
      margin: 10px 0px;
      padding: 5px 2px;
      /deep/.el-input__inner {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0 5px;
      }
    }
    .searchButton {
      border: 0;
      padding: 0;
      float: right;
      .el-icon-d-caret {
        margin: 0;
      }
    }
  }
}
</style>
